<template>
	<a-modal :width="650" :bodyStyle="{padding: 0}" centered :visible="visible" :mask-closable="false" title="预览" @cancel="handleClose" :footer="null">
		<div class="swiper_con" v-if="visible">
			<swiper @slideChangeTransitionEnd="handleSwiperChange" direction="horizontal" :loop="false"
				:autoplay="{ disableOnIntercation: false, autoplay: false, delay: 3000 }" :slidesPerView="1"
				:spaceBetween="0" :centeredSlides="false" :modules="modules">
				<swiper-slide v-for="(item, index) in coverArr" :key="index">
					<div class="swiper_item">
						<div :style="textConStyle(item, index)">
							<template v-if="item?.text?.main?.originData?.length">
								<div class="text_item" :style="textItemStyle(word_item, word_index)"
									v-for="(word_item, word_index) in item?.text?.main?.originData[0]?.list"
									:key="word_index">
									<div :style="wordStyle(word_item, word_index)">{{word_item.copywriting}}</div>
								</div>
							</template>
		
							<div class="back_con single_image" :style="`--backImage: url(${item?.image[0]?.url})`"
								v-if="item?.image_tpl == 'single_image' && item?.image?.length">
							</div>
		
							<div class="back_con couple_image_9_16"
								v-if="item?.image_tpl == 'couple_image_9_16' && item?.image?.length">
								<div class="image_item" v-for="(image_item, image_index) in item?.image"
									:style="`--backImage: url(${image_item?.url})`">
								</div>
							</div>
		
							<div class="back_con couple_image_16_9"
								v-if="item?.image_tpl == 'couple_image_16_9' && item?.image?.length">
								<div class="image_item" v-for="(image_item, image_index) in item?.image"
									:style="`--backImage: url(${image_item?.url})`">
								</div>
							</div>
		
							<div class="back_con couple_image_1_1"
								v-if="item?.image_tpl == 'couple_image_1_1' && item?.image?.length">
								<div class="image_item" v-for="(image_item, image_index) in item?.image"
									:style="`--backImage: url(${image_item?.url})`">
								</div>
							</div>
		
							<div class="back_con four_image_9_16"
								v-if="item?.image_tpl == 'four_image_9_16' && item?.image?.length">
								<div class="image_item" v-for="(image_item, image_index) in item?.image"
									:style="`--backImage: url(${image_item?.url})`">
								</div>
							</div>
		
							<div class="back_con four_image_1_1"
								v-if="item?.image_tpl == 'four_image_1_1' && item?.image?.length">
								<div class="image_item" v-for="(image_item, image_index) in item?.image"
									:style="`--backImage: url(${image_item?.url})`">
								</div>
							</div>
						</div>
					</div>
				</swiper-slide>
			</swiper>
			
			<div class="swiper_bottom">
				<a-progress status="exception" strokeColor="#2878FF" :showInfo="false" style="width: 100px; margin-left: 10px;" :strokeWidth="3"
				 v-for="(item, index) in swiperList" :key="index" :percent="item.percent" />
			</div>
		</div>
		
		<div class="bottom_con">
			<div class="material_item" v-for="(item, index) in coverArr.filter((item, index)=>index<8)" :key="index">
				<secondItem :coverItem="item" />
			</div>
		</div>
	</a-modal>
</template>

<script>
	const radioValue = 1.5
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		nextTick,
		computed,
		watch,
		onMounted
	} from "vue";
	import {
		Swiper,
		SwiperSlide
	} from 'swiper/vue';
	import secondItem from './secondItem.vue';
	import {
		Autoplay,
		Pagination
	} from 'swiper/modules';
	import 'swiper/css';
	const modules = [Autoplay, Pagination];
	import { useTimeoutPoll } from "@vueuse/core";
	export default defineComponent({
		components: {
			Swiper,
			SwiperSlide,
			secondItem
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			coverArr: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		setup(props, context) {
			
			const state = reactive({
				swiperList: [],
				count: 100,
				currentIndex: 0
			})

			const customFont = (name, url) => {
				const fontFace = new FontFace(name, `url(${url})`);
				fontFace.load().then(() => {
					document.fonts.add(fontFace);
				}).catch((error) => {
					console.error(error);
				});
			}

			const getRatio = (imageArr, image_tpl) => {
				let radioType = '1:1'
				let currentRadioHeight = 0
				if (image_tpl == 'couple_image_1_1' || image_tpl == 'four_image_1_1') {
					radioType = '1:1'
				} else if (image_tpl == 'couple_image_9_16' || image_tpl == 'four_image_9_16') {
					radioType = '9:16'
				} else if (image_tpl == 'couple_image_16_9') {
					radioType = '16:9'
				} else {
					if (imageArr?.length) {
						radioType = `${imageArr[0]?.width}:${imageArr[0]?.height}`
						currentRadioHeight = 360 / imageArr[0]?.width * imageArr[0]?.height
					}
				}

				return {
					radioType,
					currentRadioHeight,
				}
			}

			const textConStyle = computed(() => {
				return function(item, index) {
					let {
						radioType,
						currentRadioHeight,
					} = getRatio(item?.image, item?.image_tpl)

					let radioHeight = radioType == '1:1' ? 360 : radioType == '16:9' ? 202.5 :
						radioType == '9:16' ? 640 : currentRadioHeight
					return {
						position: 'relative',
						backgroundSize: '100% auto',
						backgroundPosition: 'center center',
						backgroundRepeat: 'no-repeat',
						width: 360 / radioValue + 'px',
						height: radioHeight / radioValue + 'px'
					}
				}
			})

			const wordStyle = computed(() => {
				return function(item, index) {
					return {
						'font-family': item.font_family,
						'font-size': item.font_size / radioValue + 'px',
						'width': item.width / radioValue + 'px',
						'height': item.height / radioValue + 'px',
						'color': item.color,
						'white-space': 'nowrap',
						'line-height': item.height / radioValue + 'px',
					}
				}
			})

			const textItemStyle = computed(() => {
				return function(item, index) {
					return {
						'position': 'absolute',
						'width': item.width / radioValue + 'px',
						'height': item.height / radioValue + 'px',
						'left': item.elLeft / radioValue + 'px',
						'top': item.elTop / radioValue + 'px'
					}
				}
			})
			
			const handleClose = () => {
				context.emit('close')
			}
			
			const computePercent = () => {
				if(state.count < 3000){
					state.count += 100
					state.swiperList[state.currentIndex]['percent'] = state.count/3000 * 100
				} else {
					pause()
				}
			}
			
			const { pause, resume } = useTimeoutPoll(computePercent, 100);
			
			const handleSwiperChange = (e) => {
				state.currentIndex = e.activeIndex
				state.count = 100
				state.swiperList.map(item=>{
					if(item.index < e.activeIndex){
						item['percent'] = 100
					} else {
						item['percent'] = 0
					}
				})
				if(state.swiperList?.length){
					resume()
				}
			}
			
			watch(() => props.visible, val => {
				if(val){
					state.swiperList = []
					state.count = 100
					state.currentIndex = 0
					state.swiperList = props.coverArr.map((item, index)=>{
						return {
							index,
							percent: 0
						}
					})
					if(state.swiperList?.length){
						resume()
					}
					
					props.coverArr.map(item => {
						if (item?.text?.main?.originData?.length) {
							item?.text?.main?.originData[0]?.list.map(word_item => {
								customFont(word_item?.font_family, word_item?.typeface)
							})
						}
					})
				} else {
					pause()
				}
			})

			return {
				...toRefs(state),
				modules,
				textConStyle,
				wordStyle,
				textItemStyle,
				handleClose,
				handleSwiperChange
			};
		},
	});
</script>

<style lang="less" scoped>
	
	.bottom_con{
		width: 100%;
		height: 140px;
		display: flex;
		align-items: center;
		.material_item{
			width: 67.5px;
			height: 120px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 10px;
		}
	}
	
	.back_con {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		&.single_image {
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
			background-image: var(--backImage);
		}

		&.couple_image_9_16 {
			display: flex;

			.image_item {
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 50%;
			}
		}

		&.couple_image_16_9 {
			display: flex;
			align-items: center;

			.image_item {
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 50%;
			}
		}

		&.couple_image_1_1 {
			display: flex;
			align-items: center;

			.image_item {
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 50%;
			}
		}

		&.four_image_9_16 {
			display: flex;
			flex-wrap: wrap;

			.image_item {
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 50%;
				width: 50%;
			}
		}

		&.four_image_1_1 {
			display: flex;
			flex-wrap: wrap;

			.image_item {
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 50%;
				width: 50%;
			}
		}
	}

	.text_item {
		z-index: 9;
	}

	.swiper_con {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.swiper_bottom{
			position: absolute;
			width: 100%;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			left: 0;
			bottom: -20px;
			z-index: 999;
		}
		.swiper-slide {
			width: 743px;
			height: 426px;
			transition: all 0.3s ease-in-out;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			.swiper_item {
				width: 242px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		/* 自定义 dot 样式 */
		.swiper-pagination .swiper-pagination-bullet {
			width: 12px;
			/* 设置小点的大小 */
			height: 12px;
			background-color: #999;
			/* 设置小点的颜色 */
		}

		.swiper-pagination .swiper-pagination-bullet-active {
			background-color: red;
			/* 设置当前选中的小点颜色 */
		}
	}
</style>